<%@ page session="false" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 
 

<style type="text/css">
/* - - - - - - CSS Document - - - - - - - - -
Attribution to the Author for the CSS
Title : SS
Author : Cody.Lindley@albertsons.com

Created : 3/16/07
Description:
- - - - - - - - - - - - - - - - - - - - - */


/* Bump up !IE to get to 13px equivalent */
pre, code {font:115% monospace;*font-size:100%;}
#mainNav{clear:both}
#mainNav li{
	height:71px;
	list-style:none;
	float:left;
	background-color:#EBEBEB;
	background-image: url(images/tutorial/navBtn.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#mainNav li.current{
	background-color:#C36615;
	background-image: url(images/tutorial/navCurrentBtn.gif);
}

#mainNav li.lastDone{
	background-color:#7C8437;
	background-image: url(images/tutorial/navLastDoneBtn.gif);
}

#mainNav li.done{
	background-color:#7C8437;
	background-image: url(images/tutorial/navDoneBtn.gif);
}

#mainNav li a, #mainNav li a:link, #mainNav li a:visited, #mainNav li a:hover, #mainNav li a:active {
color:#ccc;
}

#mainNav li.lastDone a, #mainNav li.lastDone a:link, #mainNav li.lastDone a:visited, #mainNav li.lastDone a:hover, #mainNav li.lastDone a:active, #mainNav li.current a, #mainNav li.current a:link, #mainNav li.current a:visited, #mainNav li.current a:hover, #mainNav li.current a:active, #mainNav li.done a, #mainNav li.done a:link, #mainNav li.done a:visited, #mainNav li.done a:hover, #mainNav li.done a:active {
color:#fff;
}

#mainNav li.done a:hover, #mainNav li.lastDone a:hover  {
color:#FFFF99;
cursor:hand;
}

#mainNav li a em{
width:150px;
display:block;
margin:6px 0 0 10px;
font-style:normal;
font-weight:bold;
}

#mainNav li a span{
width:140px;
display:block;
margin-left:10px;
font-weight:normal;
}

#mainNav li.mainNavNoBg{
background-image:none;
}

#mainNav li a{
height:71px;
display:block;
}

/* #mainNav.fiveStep */
#mainNav.fiveStep li{width:182px;}
#mainNav.fiveStep li a{width:182px;}

/* #mainNav.fourStep */
#mainNav.fourStep li{width:227px;}
#mainNav.fourStep li.mainNavNoBg{width:229px;}
#mainNav.fourStep li a{width:227px;}

/* #mainNav.threeStep */
#mainNav.threeStep li{width:303px;}
#mainNav.threeStep li.mainNavNoBg{width:304px;}
#mainNav.threeStep li a{width:303px;}

/* #mainNav.twoStep */
#mainNav.twoStep li{width:455px;}
#mainNav.twoStep li a{width:455px;}


#wizardpanel {
	background-color: #F5F5F5; margin:5px;display:none;
}
#wizardcontent {
	height:300px
}
#wizardwrapper{width:920px;}




</style>
<script type="text/javascript">
function loadnext(divout,divin){

$("." + divout).hide();
$("." + divin).fadeIn("fast");
}



</script>

<div id="wizardwrapper">

  <div class="1">

    <h3>Step 1</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous"  disabled="disabled"> <img src="images/arrow_left.png" alt=""/> Back </button>
      <button type="submit" class="next" onclick="loadnext(1,2);"> Next <img src="images/arrow_right.png" alt="" /> </button>

    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="current"><a title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
    <div style="clear:both"></div>
  </div>
 
  <div id="wizardpanel" class="2">
    <h3>Step 2</h3>
    <div id="wizardcontent"> </div>

    <div class="buttons">
      <button type="submit" class="previous" onclick="loadnext(2,1);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onclick="loadnext(2,3);"> Next <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="lastDone"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="current"><a title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>

    </ul>
  </div>
  
  
  <div id="wizardpanel" class="3">
    <h3>Step 3</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onclick="loadnext(3,2);"> <img src="images/arrow_left.png" alt="" /> Back </button>

      <button type="submit" class="next"  onclick="loadnext(3,4);"> Next <img src="images/arrow_right.png" alt=""/> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="current"><a title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>

 
  <div id="wizardpanel" class="4" >
    <h3>Step 4</h3>
    <div id="wizardcontent"> </div>
    <div class="buttons">
      <button type="submit" class="previous" onclick="loadnext(4,3);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onclick="loadnext(4,5);"> Next <img src="images/arrow_right.png" alt="" /> </button>

    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="done"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="current"><a title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="mainNavNoBg"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>
    </ul>
  </div>
 
  <div id="wizardpanel" class="5">
    <h3>Step 5</h3>
    <div id="wizardcontent"> </div>

    <div class="buttons">
      <button type="submit" class="previous" onclick="loadnext(5,4);"> <img src="images/arrow_left.png" alt="" /> Back </button>
      <button type="submit" class="next" onclick="submit()"> Finish <img src="images/arrow_right.png" alt="" /> </button>
    </div>
    <ul id="mainNav" class="fiveStep">
      <li class="done"><a href="/" title=""><em>Step 1: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>

      <li class="done"><a href="/" title=""><em>Step 2: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="done"><a href="/" title=""><em>Step 3: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="lastDone"><a href="/" title=""><em>Step 4: XXXXXXXX</em><span>Et nequ a quam turpis duisi</span></a></li>
      <li class="mainNavNoBg current"><a title=""><em>Step 5: XXXXXXXX</em> <span>Et nequ a quam turpis duisi</span></a></li>

    </ul>
  </div>
  
</div>
</body>
</html>
 